<template>
  <div class="songList" v-if="songGerData">
    <div
      class="bg"
      :style="'background-image: url(' + songGerData.artist.cover + ');'"
    >
      <span
        class="iconfont icon-arrow-left-bold"
        @click.stop="$router.go(-1)"
      ></span>
    </div>
    <div class="title">
      <div class="name">{{ songGerData.artist.name }}</div>
      <div class="fs">999万粉丝</div>
      <div class="sf">
        <span
          v-for="(item, index) in songGerData.artist.identities"
          :key="index"
          >{{ item }}</span
        >
      </div>
      <div class="btn">
        <button @click="addGz" v-show="gz==0">+关注</button><button style="background-color:#ccc;color:#fff" @click="delGz" v-show="gz==1">已关注</button><van-icon name="arrow-down" class="icon" />
      </div>
    </div>
    <van-tabs v-model="activeName" background="#ebedf042">
      <van-tab title="主页" name="a">
        <div class="zy">
          <div class="text1">艺人百科</div>
          <div class="text2">艺人名:{{ songGerData.artist.name }}</div>
          <div class="text2">
            身份
            <span
              v-for="(item, index) in songGerData.secondaryExpertIdentiy"
              :key="index"
              >{{ item.expertIdentiyName }}
            </span>
          </div>
          <div class="text2">性别:男</div>
          <div class="text2">{{ songGerData.artist.briefDesc }}</div>
        </div>
      </van-tab>
      <van-tab title="歌曲" name="b">
        <van-cell
          center
          class="songLists"
          v-for="(item, index) in songList"
          :key="index + 'song'"
           @click="setId(item.id)"
           style="background-color: transparent"
        >
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="play-circle-o"  color="rgb(170,170,170)" v-if="item.mv" @click.stop="goMv(item.mv)"/>
          </template>
          <template #icon>
            <span class="index">{{ index + 1 }}</span>
          </template>
          <template #title>
            <span>{{ item.name }}</span>
          </template>
          <template #label>
            <span v-for="(item, index) in songList.ar" :key="index + 'ar'">{{
              item.name
            }}</span>
          </template>
        </van-cell>
      </van-tab>
      <van-tab title="专辑" name="c">
        <ul>
          <li v-for="(item, index) in zhuanJi" :key="index + 'zj'" @click="goAlbum(item.id)">
            <div class="img">
              <img :src="item.picUrl" alt="" />
            </div>
            <div class="txt">
              <div class="name">{{ item.name }}</div>
              <div class="time-num">{{ item.publishTime |time}}</div>
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="视频" name="d" class="sp">
        <ul>
          <router-link v-for="(item,index) in mvList" :key="index+'mv'" :to="'/mv?id='+item.id" tag="li">
            <div class="img">
              <img :src="item.imgurl" alt="" width="150px" height="100%">
            </div>
            <div class="txt">
              <div class="name">{{item.name}}</div>
              <div class="time-num">{{item.publishTime}}</div>
              <div class="time-num">{{item.playCount|playCountData}}</div>
            </div>
          </router-link>
        </ul>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {
  getSingerData,
  getSingerData_1,
  getSingerData_2,
  getSingerData_3
} from "../api/songgerData";
import {getGsList,setGzSongGer} from "../api/user"
export default {
  data() {
    return {
      activeName: "a",
      songGerData: null,
      songList: null,
      zhuanJi: null,
      mvList:null,
      gz:0,
      gzList:null
    };
  },
  methods:{
     setId(id) {
      this.$emit("get-player-id", id);
      //  this.$emit("get-play-all-id",this.$route.query.id);//传递歌单id
    },
    goAlbum(id){
      this.$router.push({path:'/album',query: { id} })
    },
     goMv(mvid){
      this.$router.push({path:'/mv',query: { id:mvid} })
    },
    addGz(){
      let id=this.$route.query.id;
      this.gz=1
      setGzSongGer({
        id,
        t:this.gz
      }).then(data=>{
        console.log(data)
      })
    },
    delGz(){
      let id=this.$route.query.id;
      this.gz=0
      setGzSongGer({
        id,
        t:this.gz
      }).then(data=>{
        console.log(data)
      })
    }
  },
  // 过滤器
  filters: {
    time(value) {
      var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000

      let Y = date.getFullYear() + "年";

      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "月";

      let D = date.getDate() + "日";

      return Y + M + D; //时分秒可以根据自己的需求加上
    },
     playCountData(value) {
      let w = value > 10000 ? value / 10000 : value; // 万计算
      let y = w > 10000 ? parseInt(value / 10000) + "亿" : parseInt(w) + "万"; //亿计算
      return y;
    },
  },
  created() {
    console.log(this.$route.query.id);
    getSingerData({
      id: this.$route.query.id,
    }).then((data) => {
      console.log(data);
      this.songGerData = data.data;
    });
    getSingerData_1({
      id: this.$route.query.id,
    }).then((data) => {
      console.log(data);
      this.songList = data.hotSongs;
    });
    getSingerData_2({
      id: this.$route.query.id,
    }).then((data) => {
      console.log(data);
      this.zhuanJi = data.hotAlbums;
      console.log(data)
    });
     getSingerData_3({
      id: this.$route.query.id,
    }).then((data) => {
      console.log(data);
      this.mvList = data.mvs;
    });
    // let uid=window.localStorage.getItem('uid')
    // getGzList({
    //   uid
    // }).then(data=>{
    //   if(data.code==200){
    //       this.gzList=data.follow
    //   }
    // })
    getGsList().then(data=>{
      console.log(data);
      this.gzList=data.data
    })
  },
  watch:{
    gzList(){
      this.gzList.forEach(item=>{
        if(item.id==this.$route.query.id){
          this.gz=1;
          return
        }
      })
    }
  },

};
</script>

<style lang="less">
.songList {
  background-image: linear-gradient(#ebedf0, #fff);
//  border: 1px solid transparent;
  // background-color: #ebedf0;
  .bg {
    width: 100%;
    height: 300px;
    background-color: red;
    background-size: cover;
    position: relative;

    .iconfont {
      font-size: 24px;
      color: #fff;
    }
  }
  .title {
    text-align: center;
    width: 85%;
    margin: auto;
    position: relative;
    top: -20px;
    padding: 20px 0;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.822);
    line-height: 30px;

    .name {
      font-size: 24px;
      font-weight: bold;
    }
    .fs,
    .sf {
      color: rgb(154, 154, 154);
      font-size: 14px;
      span {
        padding: 0 8px;
      }
    }
    .btn {
      button {
        background-color: red;
        border: none;
        padding: 0 20px;
        border-radius: 15px;
        color: #fff;
      }
      .icon {
        border: 5px;
        background-color: #f2f3f5;
        // font-size: 24px;
        margin-left: 5px;
        padding: 8px;
        vertical-align: middle;
        border-radius: 50%;
      }
    }
  }
  .zy {
    background-color: #fff;
    padding: 10px;
    margin: 10px;
    line-height: 35px;
    border-radius: 8px;
    .text1 {
      font-size: 18px;
      font-weight: bold;
      color: #464646;
    }
    .text2 {
      font-size: 14px;
      color: #646566;
      font-weight: 400;
    }
  }
  .songLists {
    // background-color:transparent
    .index {
      margin-right: 10px;

    }
  }
  ul {
    padding: 10px;
    li {
      display: flex;
      align-items: center;
      margin: 10px 0;
      .img {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        background-color: red;
        flex-shrink: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .txt {
        margin-left: 20px;
        .name {
          font-size: 16px;
          color: rgb(48, 45, 45);
        }
        .time-num {
          font-size: 14px;
          color: rgb(185, 185, 185);
        }
      }
    }
  }
  .sp {
    ul {
      li {
        .img {
          width: 150px;
          height: 100px;
          flex-shrink: 0;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>